<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [
        {
          id: '604e21feb205b95968e13129',
          pid: '0',
          name: '总裁办',
        },
        {
          id: '604e223fb205b95968e1312b',
          pid: '0',
          name: '人事部',
        },
        {
          id: '604e2251b205b95968e1312c',
          pid: '0',
          name: '财务部',
        },
        {
          id: '604e2262b205b95968e1312d',
          pid: '604e2251b205b95968e1312c',
          name: '财务核算部',
        },
        {
          id: '604e227db205b95968e1312e',
          pid: '604e2251b205b95968e1312c',
          name: '税务管理部',
        },
        {
          id: '604e2297b205b95968e1312f',
          pid: '604e2251b205b95968e1312c',
          name: '薪资管理部',
        },
        {
          id: '6051ad90e93db6522c1d00d2',
          pid: '0',
          name: '技术部',
        },
        {
          id: '6051adb6e93db6522c1d00d3',
          pid: '6051ad90e93db6522c1d00d2',
          name: 'Java研发部',
        },
        {
          id: '6051add6e93db6522c1d00d4',
          pid: '6051ad90e93db6522c1d00d2',
          name: 'Python研发部',
        },
        {
          id: '6051adefe93db6522c1d00d5',
          pid: '6051ad90e93db6522c1d00d2',
          name: 'Php研发部',
        },
      ]

      //用forEach写的
      function getTree1(data) {
        //1.准备一个新数组接收修改后的数据
        const newData = []

        //2.第一次遍历，找到数据中应该会有分支的每一项，并添加属性children为空数组
        //3.并且收集每一项有分支的id用于下一次判断
        data.forEach((item) => {
          if (item.pid === '0') {
            item.children = []
            const id = item.id

            //4.第二次遍历数据，找到有children项对应的每一项并且推入到children数组中
            //5.通过判断pid 是否等于 id 的方式找到对应的每一项
            data.forEach((childrenItem) => {
              if (childrenItem.pid === id) {
                item.children.push(childrenItem)
              }
            })

            //6.最后将经过处理的数据每一项推入到新的数组中
            newData.push(item)
          }
        })

        console.log(newData)
      }

      //用for写的
      function getTree2(data) {
        //1.准备一个空数组用来接收处理完的数据
        const newData = []
        //2.第一次遍历，找到数据中应该会有分支的每一项，并添加属性children为空数组
        // 通过观察可以发现pid为0的拥有子集，并且子集的pid等于拥有子集的项的id

        for (let i = 0; i < data.length; i++) {
          //3.并且收集每一项有分支的id用于下一次判断
          let id

          if (data[i].pid === '0') {
            data[i].children = []

            id = data[i].id
          }

          for (let j = 0; j < data.length; j++) {
            //4.第二次遍历数据，找到有children项对应的每一项并且推入到children数组中
            //5.通过判断pid 是否等于 id 的方式找到对应的每一项
            if (data[j].pid === id) {
              data[i].children.push(data[j])
            }
          }
          //6.最后判断是否有子集的项放入新数组中
          if (data[i].pid === '0') {
            newData.push(data[i])
          }
        }

        console.log(newData)
      }

      getTree1(data)
    </script>
  </body>
</html>
